<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>订单设置</title>
<link href="订单详情.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
    function setBodyWidth(){
	var barWidthHelper=document.createElement('div');
	barWidthHelper.style.cssText="overflow:scroll; width:100px; height:100px;";
	document.body.appendChild(barWidthHelper);
	var barWidth=barWidthHelper.offsetWidth-barWidthHelper.clientWidth;
	document.body.removeChild(barWidthHelper);
	var bodyWidth=window.screen.availWidth-barWidth;
	return bodyWidth;
    }
</script>
<script>
    $(document).ready(
	function(){
		var bodyWidth=setBodyWidth()+"px";
		//document.body.style.width=bodyWidth;
		$("body").css("width",bodyWidth);
	}
);
</script>
</head>
<body>
        <div class="point1">
            <div class="points1">
                <span class="read">首页 <span style="color: #ADADAD;">/</span> 订单 <span style="color: #ADADAD;">/</span> <span style="color: #ADADAD;font-weight: 200;font-size: 13px;">订单详情</span></span>
            </div>
            <div class="points2">
                <input class="points3" type="image" src="imggg.jfif">
                <button type="button" class="nabla points4"></button>
            </div>
        </div>
        <div class="point2">
            <div class="box1"></div>
            <div class="outer1"></div>
            <div class="box2"></div>
            <div class="outer2"></div>
            <div class="box3"></div>
            <div class="outer3"></div>
            <div class="box4"></div>
            <div class="outer4"></div>
            <div class="box5"></div>
            <div class="outer5"></div>
            <div class="pointe1"></div>
            <div class="pointe2"></div>
            <div class="pointe3"></div>
            <div class="pointe4"></div>
            <span class="pointv1">提交订单</span>
            <span class="pointv2">2018-09-15 12:24:27</span>
            <span class="pointv3">支付订单</span>
            <span class="pointv4">平台发货</span>
            <span class="pointv5">确认收货</span>
            <span class="pointv6">完成评价</span>
        </div>
        <div class="point3">
            <div class="pointf1">
                <div class="pointf2">
                    <div class="pointf4">
                        <img src="捕获.PNG" class="pointf5">
                    </div>
                    <div class="pointf3">
                        <span>当前订单状态: 已关闭</span>
                    </div>
                    <input type="submit" value="备注订单" class="file">
                </div>
                <div class="seed1">
                    <div class="pointq1">
                        <div class="pointd1">
                            <span class="glyphicon glyphicon-bookmark" aria-hidden="true" style="position: absolute; left: 20px; top: 25px;"></span>
                            <div class="pointd3">基本信息</div>
                        </div>
                        <div class="pointd2">
                            <div class="pointd4">
                                <table class="seeks1" border="1" bordercolor=#ECECFF>
                                    <tr class="seeke1">
                                        <td>订单编号</td>
                                        <td>发货流水单号</td>
                                        <td>用户账号</td>
                                        <td>支付方式</td>
                                        <td>订饭来源</td>
                                        <td>订单类型</td>
                                    </tr>
                                    <tr>
                                        <td>201809140101000001</td>
                                        <td>暂无</td>
                                        <td>test</td>
                                        <td>微信</td>
                                        <td>APP订单</td>
                                        <td>正常订单</td>
                                    </tr>
                                    <tr class="seeke1">
                                        <td>配送方式</td>
                                        <td>物流单号</td>
                                        <td>自动确认收货时间</td>
                                        <td>订单可得优币</td>
                                        <td>订单可得成长值</td>
                                        <td>活动信息</td>
                                    </tr>
                                    <tr>
                                        <td>暂无</td>
                                        <td>暂无</td>
                                        <td>15天</td>
                                        <td>13284</td>
                                        <td>13284</td>
                                        <td>单品促销,打折优...</td>
                                    </tr>
                                </table> 
                            </div>
                            
                        </div>
                    </div>
                    <div class="pointq2">
                        <div class="pointq1">
                            <span class="glyphicon glyphicon-bookmark" aria-hidden="true" style="position: absolute; left: 20px; top: 15px;"></span>
                            <div class="pointw1">收货人信息</div>
                        </div>
                        <div class="pointb1">
                            <div class="pointd4">
                                <table class="seeks1" border="1" bordercolor=#ECECFF>
                                    <tr class="seeke2">
                                        <td>收货人</td>
                                        <td>手机号码</td>
                                        <td>邮政编码</td>
                                        <td>收货地址</td>
                                    </tr>
                                    <tr>
                                        <td>大梨</td>
                                        <td>18033441849</td>
                                        <td>518000</td>
                                        <td>江苏省 常州市 天宁</td>
                                    </tr>
                                </table> 
    
                            </div>
                        </div>
        
                    </div>
                    <div class="pointq3">
                        <div class="pointq1">
                            <span class="glyphicon glyphicon-bookmark" aria-hidden="true" style="position: absolute; left: 20px; top: 15px;"></span>
                            <div class="pointw2">商品信息</div>
                        </div>
                        <div class="pointb3">
                            <div class="pointd4">
                                <table class="seeks1" border="1" bordercolor=#ECECFF>
                                    <tr class="put1">
                                        <th>商品图片</th>
                                        <th>商品名称</th>
                                        <th>价格/货号</th>
                                        <th>属性</th>
                                        <th>数量</th>
                                        <th>小计</th>
                                    </tr>
                                    <tr>
                                        <td><img src="ping1.PNG" style="width: 50px; height: 60px;"></td>
                                        <td>华为 HUAWEI P20</td>
                                        <td>价格：￥3788</td>
                                        <td>颜色:金色;容量:16G;</td>
                                        <td>1</td>
                                        <td>￥3788</td>
                                    </tr>
                                    <tr>
                                        <td><img src="ping2.PNG" style="width: 50px; height: 60px;"></td>
                                        <td>小米8</td>
                                        <td>价格：￥2699</td>
                                        <td>颜色:黑色;容量:32G;</td>
                                        <td>3</td>
                                        <td>￥8097</td>
                                    </tr>
                                    <tr>
                                        <td><img src="ping3.PNG" style="width: 50px; height: 60px;"></td>
                                        <td>红米5A</td>
                                        <td>价格：￥649</td>
                                        <td>颜色:金色;容量:16G;</td>
                                        <td>1</td>
                                        <td>￥649</td>
                                    </tr>
                                    <tr>
                                        <td><img src="ping3.PNG" style="width: 50px; height: 60px;"></td>
                                        <td>红米5A</td>
                                        <td>价格：￥649</td>
                                        <td>颜色:金色;容量:32G;</td>
                                        <td>1</td>
                                        <td>￥699</td>
                                    </tr>
                                </table> 
    
                            </div>
    
                        </div>
        
                    </div>
                    <div class="pointq4">
                        <div class="pointq1">
                            <span class="glyphicon glyphicon-bookmark" aria-hidden="true" style="position: absolute; left: 20px; top: 15px;"></span>
                            <div class="pointw3">费用信息</div>
                        </div>
                        <div class="pointq6">
                            <div class="pointd4">
                                <table class="seeks1" border="1" bordercolor=#ECECFF>
                                    <tr class="seeke3">
                                        <td>商品合计</td>
                                        <td>运费</td>
                                        <td>优惠卷</td>
                                        <td>积分抵扣</td>
                                    </tr>
                                    <tr>
                                        <td>￥18732</td>
                                        <td>￥20</td>
                                        <td>-￥10</td>
                                        <td>-￥0</td>
                                    </tr>
                                    <tr class="seeke3">
                                        <td>优惠活动</td>
                                        <td>折扣金额</td>
                                        <td>订单总金额</td>
                                        <td>应付款金额</td>
                                    </tr>
                                    <tr>
                                        <td>-￥2344.25</td>
                                        <td>-￥10</td>
                                        <td>￥18752</td>
                                        <td>￥16387.75</td>
                                    </tr>
                                </table> 
                            </div>
                        </div>
        
                    </div>
                    <div class="pointq5">
                        <div class="pointq1">
                            <span class="glyphicon glyphicon-bookmark" aria-hidden="true" style="position: absolute; left: 20px; top: 15px;"></span>
                            <div class="pointw3">费用信息</div>
                        </div>
                        <div class="pointq6">
                            <div class="pointd4">
                                <table class="seeks1" border="1" bordercolor=#ECECFF>
                                    <tr class="put2">
                                        <th>操作者</th>
                                        <th>操作时间</th>
                                        <th>订单状态</th>
                                        <th>付款状态</th>
                                        <th>发货状态</th>
                                        <th>备注</th>
                                    </tr>
                                    <tr>
                                        <td colspan="6">暂无数据</td>
                                    </tr>
                                </table> 
                            </div>
                        </div>
        
                    </div>
                </div>
    
            </div>
    
        </div>
</body>
</html>